<!-- 
此页面废弃
 原因：日历不符合项目逻辑
 -->
<template>
	<view class="page">
		<view class="container">
			<view class="header flex">
				<view class="header-total flex">
					<view class="header-tips" style="background: #F94141;"></view>
					<view class="header-name">忙碌</view>
				</view>
				<view class="header-total flex">
					<view class="header-tips" style="background: #DEDEDE;"></view>
					<view class="header-name">空闲</view>
				</view>
				<view class="header-total flex" style="margin-right: 180rpx;">
					<view class="header-tips" style="background: #03E507;"></view>
					<view class="header-name">有单</view>
				</view>
				<image src="@/static/img/add1.png" @click="isPopup = true" mode=""></image>
			</view>
		  <wn-calendar 
		    ref="calendar" 
		    :data="[{date:'2023/5/25',data:{date:'2023/05/25',text:'显示文本',type:2}}]" 
		    :isBorder="true" 
		    :isLess="false" 
		    :colors="['#F94141', '#DEDEDE', '#03E507']" 
		        :isEn="false"
		        format="/"
		    @change="onChange" 
		    @choose="onChoose" 
		  ></wn-calendar>
		</view>
		<view class="card">
			<view class="card-item flex">
				<view class="card-busy card-tips">忙碌</view>
				<view class="card-time">09:10~10:20</view>
				<text class="tn-icon-down" style="font-size: 44rpx;"></text>
			</view>
			<view class="card-item flex">
				<view class="card-success card-tips">有单</view>
				<view class="card-time">09:10~10:20</view>
			</view>
			<view class="card-item flex">
				<view class="card-busy card-tips">忙碌</view>
				<view class="card-time">09:10~10:20</view>
				<text class="tn-icon-down" style="font-size: 44rpx;"></text>
			</view>
			<view class="card-item flex">
				<view class="card-success card-tips">有单</view>
				<view class="card-time">09:10~10:20</view>
			</view>
		</view>
		
		<tn-popup v-model="isPopup" mode="bottom" :maskCloseable="false" closeBtn :borderRadius="40" :closeIconSize="40">
			<view class="popup">
				<view class="popup-title center">添加您的忙碌时间</view>
				<view class="popup-header flex">
					<view class="popup-header-item" @click="actime = 1" :class="actime == 1 ? 'mainColor':''">
						<view class="popup-name">起始时间</view>
						<view class="popup-date">{{ startnyr }}</view>
						<view class="popup-time">{{ starttime }}</view>
					</view>
					<view class="popup-header-item" @click="actime = 2" :class="actime == 2 ? 'mainColor':''">
						<view class="popup-name">截止时间</view>
						<view class="popup-date">{{ endnyr }}</view>
						<view class="popup-time">{{ endtime }}</view>
					</view>
				</view>
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" 
					:mask-style="maskStyle" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in hours" :key="index">{{item}}时</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in minutess" :key="index">{{item}}分</view>
					</picker-view-column>
				</picker-view>
				<view class="popup-footer flex">
					<view class="popup-btn popup-reset" @click="resetfun()">重置</view>
					<view class="popup-btn popup-confirm" @click="setmltimefun">确定</view>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script>
	export default {
		data() {
			const date = new Date();
			const years = [];
			const year = date.getFullYear();
			const months = [];
			const month = date.getMonth() + 1;
			const days = [];
			const day = date.getDate();
			const hours =[];
			const hour = date.getHours();
			const minutess = [];
			const minutes = date.getMinutes();
			for (let i = date.getFullYear(); i <= 2125; i++) {
				years.unshift(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			for (let i = 0; i <= 23; i++) {
				if(i < 10){
					hours.push('0'+i)
				}else{
					hours.push(i)
				}
			}
			for (let i = 0; i <= 59; i++) {
				if(i < 10){
					minutess.push('0'+i)
				}else{
					minutess.push(i)
				}
			}
			return {
				actime:1,  // 1起始时间  2截止时间
				isPopup: false,
				visible: true,
				years,
				year,
				months,
				month,
				days,
				day,
				hours,
				hour,
				minutess,
				minutes,
				value: [9999, month - 1, day - 1],
				// background: #E8F3FF;color: #0E71EB;
				indicatorStyle: `height: 100rpx;border-radius: 10rpx;`,
				maskStyle: `font-size: 32rpx;color: #666666;`,
				startnyr:'',
				starttime:'',
				endnyr:'',
				endtime:'',
				webactime:''
			}
		},
		onLoad() {
			const date = new Date();
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			this.webactime = year+'-'+month;
			this.dutylistfun()
		},
		methods: {
			bindChange(e) {
				const val = e.detail.value;
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				this.hour = this.days[val[3]] || '0';
				this.minutes = this.days[val[4]] || '0';
				let hour = this.hour < 10 ? '0'+this.hour : this.hour;
				let minutes = this.minutes < 10 ? '0'+this.minutes : this.minutes;
				if(this.actime == 1){
					this.startnyr = this.year+'-'+this.month+'-'+this.day;
					this.starttime = hour +':'+ minutes;
				}else{
					this.endnyr = this.year+'-'+this.month+'-'+this.day;
					this.endtime = hour +':'+ minutes;
				}
			},
			onChoose(e) {
				console.log(e);
			},
			onChange(e) {
				this.webactime = e.year+'-'+e.month;
				this.dutylistfun()
			},
			resetfun(){  // 重置
				this.startnyr = '';
				this.starttime ='';
				this.endnyr = '';
				this.endtime = '';
			},
			setmltimefun(){  // 设置忙碌时间
				let sendData = {
					start_time:this.startnyr +' '+this.starttime,
					end_time:this.endnyr+' '+this.endtime,
					status:'1'  // 1设置 2取消
				};
				if(this.startnyr == ''){
					this.apifun.toast('请选择开始时间');
					return false
				};
				if(this.endnyr == ''){
					this.apifun.toast('请选择结束时间');
					return false
				};
				this.apifun.unirequest('/partner/duty/setBusyTime','post',sendData,(res)=>{
					this.isPopup = false;
					if(res.code === 200){
						let datas = res.data;
						this.apifun.toast('设置成功')
					}else{
						this.apifun.toast(res.msg)
					}
					this.startnyr = '';
					this.starttime ='';
					this.endnyr = '';
					this.endtime = '';
				})
			},
			dutylistfun(){  // 值班列表
				let sendData = {
					month:this.webactime,  // 月
					record:'',  // 数组 title_id题目ID，result结果：是或否，remark备注
				};
				console.log(sendData)
				return false
				this.apifun.unirequest('/partner/duty/getDutyList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.mainColor{
		color:#0E71EB !important;
	}
	.popup {
		padding: 50rpx 30rpx;
		box-sizing: border-box;
		.popup-title {
			font-size: 32rpx;
			font-weight: bold;
			padding-bottom: 50rpx;
			border-bottom: 2rpx solid #F7F7F7;
		}
		.popup-header {
			// justify-content: space-between;
			.popup-header-item {
				width: 50%;
				margin-top: 40rpx;
				text-align: center;
				font-weight: bold;
				color: #666666;
				.popup-name {
					font-size: 32rpx;
				}
				.popup-date {
					margin-top: 10rpx;
					font-size: 40rpx;
				}
				.popup-time {
					margin-top: 12rpx;
					font-size: 30rpx;
					padding-bottom: 46rpx;
				}
			}
		}
		.picker-view {
				width: 750rpx;
				height: 600rpx;
				margin-top: 20rpx;
			}
			.item {
				line-height: 100rpx;
				text-align: center;
		}
		.popup-footer {
			justify-content: space-between;
			.popup-btn {
				width: 300rpx;
				height: 76rpx;
				line-height: 76rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				border-radius: 10rpx;
				background: #FFFFFF;
				box-sizing: border-box;
			}
			.popup-reset {
				border: 2rpx solid #0E71EB;
				color: #0E71EB;
			}
			.popup-confirm {
				color: #FFFFFF;
				background: #0E71EB;
			}
		}
	}
	.page {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.header {
		padding: 42rpx 40rpx 42rpx 30rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		border-bottom: 2rpx solid #F4F4F4;
		.header-total {
			margin-right: 50rpx;
			.header-tips {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			.header-name {
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		image {
			width: 44rpx;
			height: 44rpx;
		}
	}
	.card {
		margin-top: 20rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		.card-item {
			padding: 42rpx 30rpx;
			border-bottom: 2rpx solid #F3F3F3;
			.card-busy {
				border: 2rpx solid #F94141;
				color: #F94141;
			}
			.card-success {
				border: 2rpx solid #03E507;
				color: #03E507;
			}
			.card-tips {
				border-radius: 6rpx;
				font-size: 26rpx;
				padding: 0 10rpx;
				margin-right: 30rpx;
			}
			.card-time {
				font-size: 30rpx;
				font-weight: bold;
				width: 470rpx;
			}
		}
	}
</style>